<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ladda Bootstrap Demos</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/ladda-themeless.min.css">
<link rel="stylesheet" href="css/prism.css">
</head>

<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/loading/Buttons-with-Built-in-Loading-Indicators-For-Bootsrap-3-Ladda-Bootstrap.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Ladda Bootstrap Demos</h1>
<h2>Click the buttons to see the effect</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>
<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
<button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>
<button class="btn btn-primary ladda-button" data-style="expand-up"><span class="ladda-label">expand-up</span></button>
<button class="btn btn-primary ladda-button" data-style="expand-down"><span class="ladda-label">expand-down</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>
<button class="btn btn-info ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>
<button class="btn btn-info ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>
<button class="btn btn-warning ladda-button" data-style="slide-left"><span class="ladda-label">slide-left</span></button>
<button class="btn btn-warning ladda-button" data-style="slide-right"><span class="ladda-label">slide-right</span></button>
<button class="btn btn-warning ladda-button" data-style="slide-up"><span class="ladda-label">slide-up</span></button>
<button class="btn btn-warning ladda-button" data-style="slide-down"><span class="ladda-label">slide-down</span></button>
</p>
<p>
<button class="btn btn-warning ladda-button" data-style="contract"><span class="ladda-label">contract</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center progress-demo">
<p>Built-in progress bar</p>
<p>
<button class="btn btn-danger ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>
<button class="btn btn-danger ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>
<button class="btn btn-danger ladda-button" data-style="contract"><span class="ladda-label">contract</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<p>Sizes</p>
<p>
<button class="btn btn-primary btn-xs ladda-button" data-style="expand-right" data-size="xs"><span class="ladda-label">extra small</span></button>
<button class="btn btn-primary btn-sm ladda-button" data-style="expand-right" data-size="s"><span class="ladda-label">small</span></button>
<button class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"><span class="ladda-label">large</span></button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>Usage:</h2>
<hr>
<p>Include the CSS and Javascript for Spin.js and Ladda effect:</p>
<pre><code class="language-markup">&lt;link rel="stylesheet" href="dist/ladda-themeless.min.css"&gt;
&lt;script src="dist/spin.min.js"&gt;&lt;/script&gt;
&lt;script src="dist/ladda.min.js"&gt;&lt;/script&gt;</code></pre>
<p>Then to produce a button with the Ladda effect:</p>
<pre><code class="language-markup">&lt;button class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/button&gt;</code></pre>
<p>Or using &quot;a&quot; tag:</p>
<pre><code class="language-markup">&lt;a href="#" class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/a&gt;</code></pre>
<p>You can choose the style of the effect by setting the <code>data-style</code> attribute:</p>
<pre><code class="language-markup">data-style="expand-left"
data-style="expand-left"
data-style="expand-right"
data-style="expand-up"
data-style="zoom-in"
data-style="zoom-out"
data-style="slide-left"
data-style="slide-right"
data-style="slide-up"
data-style="slide-down"
data-style="contract"</code></pre>
<p>You can choose the size of the spinner by setting the <code>data-size</code> attribute:</p>
<pre><code class="language-markup">data-size="xs"
data-size="s"
data-size="l"						
</code></pre>
<p>You can choose the color of the spinner by setting the <code>data-spinner-color</code> attribute (HEX code):</p>
<pre><code class="language-markup">data-spinner-color="#FF0000"</code></pre>
<h2>Control the UI state with Javascript:</h2>
<p>To activate the effect you can bind Ladda to all buttons that submit a form</p>
<pre><code class="language-javascript">Ladda.bind( 'input[type=submit]' );</code></pre>
<p>When using AJAX forms, you can use the following syntax:</p>
<pre><code class="language-markup">&lt;a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button" data-style="expand-right" data-size="l"&gt;&lt;span class="ladda-label"&gt;Submit form&lt;/span&gt;&lt;/a&gt;</code></pre>
<pre><code class="language-javascript">$(function() {
	$('#form-submit').click(function(e){
	 	e.preventDefault();
	 	var l = Ladda.create(this);
	 	l.start();
	 	$.post("your-url", 
	 	    { data : data },
	 	  function(response){
	 	    console.log(response);
	 	  }, "json")
	 	.always(function() { l.stop(); });
	 	return false;
	});
});</code></pre>
<p>Other methods available through Javascript</p>
<pre><code class="language-javascript">l.stop();
l.toggle();
l.isLoading();
l.setProgress( 0-1 );</code></pre>
<p> Love this? Tweet it! <a href="http://twitter.com/share" class="twitter-share-button" data-text="Ladda Bootstrap - Buttons with built-in loading indicators for Bootstrap" data-url="https://github.com/msurguy/ladda-bootstrap" data-count="small" data-related="bootsnipp"></a></p>
<p style="margin-bottom:100px;"> Original Ladda UI concept by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a>, examples adapted to work with Bootstrap 3 by <a href="http://twitter.com/msurguy" target="_blank">@msurguy</a> </p>
</div>
</div>
</div>
<script src="dist/spin.min.js"></script> 
<script src="dist/ladda.min.js"></script> 
<script>

			// Bind normal buttons
			Ladda.bind( 'div:not(.progress-demo) button', { timeout: 2000 } );

			// Bind progress buttons and simulate loading progress
			Ladda.bind( '.progress-demo button', {
				callback: function( instance ) {
					var progress = 0;
					var interval = setInterval( function() {
						progress = Math.min( progress + Math.random() * 0.1, 1 );
						instance.setProgress( progress );

						if( progress === 1 ) {
							instance.stop();
							clearInterval( interval );
						}
					}, 200 );
				}
			} );

			// You can control loading explicitly using the JavaScript API
			// as outlined below:

			// var l = Ladda.create( document.querySelector( 'button' ) );
			// l.start();
			// l.stop();
			// l.toggle();
			// l.isLoading();
			// l.setProgress( 0-1 );

		</script> 
        
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>
